<template>
    <div class="cretae-container">
        <div class="top">
            <span>
                用户创建
            </span>
        </div>
        <el-form :model="form" label-width="120px">
            <el-form-item label="权限名称" prop="auth_name" required>
                <el-input v-model="form.auth_name" placeholder="请输入权限名称" />
            </el-form-item>
            <el-form-item label="种类" prop="type">
                <el-radio-group v-model="form.type" class="ml-4">
                    <el-radio label="菜单" border :value="1" size="large"></el-radio>
                    <el-radio label="按钮" border :value="2" size="large"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item  label="路由路径" prop="path">
                <el-input v-model="form.path" placeholder="请输入路由路径" />
            </el-form-item>
            <el-form-item  label="组件缓存" prop="keep_alive">
                <el-switch v-model.number="form.keep_alive" :active-value="1" :inactive-value="0" class="ml-2"
                    inline-prompt style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                    active-text="已缓存" inactive-text="未缓存" />
            </el-form-item>
            <el-form-item  label="组件路径" prop="component">
                <el-input v-model="form.component" placeholder="请输入组件路径" />
            </el-form-item>
            <el-form-item label="所属权限" prop="pid">
                <el-select v-model="form.pid" placeholder="请选择所属权限">
                    <el-option label="顶级权限" :value="0" />
                    <el-option v-for="item in list" :key="item.auth_id" :label="item.auth_name" :value="item.auth_id" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即编辑</el-button>
                <el-button @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>


<script setup>
import { requestIns } from '@/utils/request'
import { reactive, onMounted, ref} from 'vue'

const form = reactive({
    auth_name: '',
    type: 1,
    path: '',
    component: '',
    keep_alive: 0,
    pid: 0
})
const list = ref([])
const getList = async () => {
    const res = await requestIns.request('/auth/index', 'get',)
    // console.log(res)
    if (res.state = 200) {
        list.value = res.data
    }
}
onMounted(() => {
    getList()
})

const onSubmit = async () => {
    const res = await requestIns.request('/auth/create', 'post', form)
    if (res.state == 201) {
        ElMessage.success(res.msg)
    } else {
        ElMessage.error(res.msg)
    }
    reset()
}
const reset = () => {
    form.auth_name = ''
    form.type = 1
    form.path = ''
    form.component = ''
    form.keep_alive = 0
    form.pid = 0
}
</script>

<style scoped>
.cretae-container {
    background-color: #fff;

    .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
        border-bottom: 1px solid #f0f0f0;
    }

    .el-form {
        box-sizing: border-box;
        padding: 20px;
    }
}
</style>